

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Positions, sizes, and layouts &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.0/en/html/overview/coords.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Styles" href="style.html" />
    <link rel="prev" title="Objects" href="object.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.0
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#nothing-happens-my-display-driver-is-not-called-what-have-i-missed">Nothing happens, my display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-i-see-nonsense-colors-on-the-screen">Why I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#id1">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/espressif.html">Espressif (ESP32)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#get-the-lvgl-demo-project-for-esp32">Get the LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-in-your-esp32-project">Use LVGL in your ESP32 project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#get-lvgl">Get LVGL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-esp32-drivers-in-your-project">Use lvgl_esp32_drivers in your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#support-for-esp32-s2">Support for ESP32-S2</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#get-the-lvgl-ardunio-library">Get the LVGL Ardunio library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-the-examples">Configure the examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#initialize-lvgl-and-run-an-example">Initialize LVGL and run an example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#first-you-need-to-install-the-pre-requisite-on-your-system">First you need to install the pre-requisite on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#now-let-s-to-create-a-workspace-to-save-our-files">Now let's to create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Overview</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#states">States</a></li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#load-font-at-run-time">Load font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#add-a-driver">Add a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="animation.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="animation.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#masking">Masking</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id1">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id2">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id3">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id5">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id6">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id8">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id9">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id12">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id13">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id15">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id16">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id17">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id18">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id19">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id20">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id22">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id23">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id24">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id25">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id26">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id27">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id30">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-x">v8.X</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8">v8</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Overview</a> &raquo;</li>
        
      <li>Positions, sizes, and layouts</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/docs/overview/coords.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="positions-sizes-and-layouts">
<h1>Positions, sizes, and layouts<a class="headerlink" href="#positions-sizes-and-layouts" title="Permalink to this headline">¶</a></h1>
<div class="section" id="overview">
<h2>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h2>
<p>Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. By no means a complete implementation of the standard but subsets of CSS were implemented (sometimes with minor adjustments).
In shorts this means:</p>
<ul class="simple">
<li><p>the set coordinates (size, position, layouts, etc) are stored in styles</p></li>
<li><p>support min-width, max-width, min-height, max-height</p></li>
<li><p>have pixel, percentage, and &quot;content&quot; units</p></li>
<li><p>x=0; y=0 coordinate means the to top-left corner of the parent plus the left/top padding plus border width</p></li>
<li><p>width/height means the full size, the &quot;content area&quot; is smaller with padding and border width</p></li>
<li><p>a subset of flexbox and grid layouts are supported</p></li>
</ul>
<div class="section" id="units">
<h3>Units<a class="headerlink" href="#units" title="Permalink to this headline">¶</a></h3>
<ul class="simple">
<li><p>pixel: Simply a position in pixels. A simple integer always means pixel. E.g. <code class="docutils literal notranslate"><span class="pre">lv_obj_set_x(btn,</span> <span class="pre">10)</span></code></p></li>
<li><p>percentage: The percentage of the size of the object or its parent (depending on the property). The <code class="docutils literal notranslate"><span class="pre">lv_pct(value)</span></code> converts a value to percentage. E.g. <code class="docutils literal notranslate"><span class="pre">lv_obj_set_width(btn,</span> <span class="pre">lv_pct(50))</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code>: Special value to set the width/height of an object to involve all the children. Its similar to <code class="docutils literal notranslate"><span class="pre">auto</span></code> in CSS. E.g. <code class="docutils literal notranslate"><span class="pre">lv_obj_set_width(btn,</span> <span class="pre">LV_SIZE_CONTENT)</span></code>.</p></li>
</ul>
</div>
<div class="section" id="boxing-model">
<h3>Boxing model<a class="headerlink" href="#boxing-model" title="Permalink to this headline">¶</a></h3>
<p>LVGL follows CSS's <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing">border-box</a> model.
An object's &quot;box&quot; is built from the following parts:</p>
<ul class="simple">
<li><p>bounding box: the width/height of the elements.</p></li>
<li><p>border width: the width of the border.</p></li>
<li><p>padding: space between the sides of the object and its children.</p></li>
<li><p>content: the content area which size if the bounding box reduced by the border width and the size of the paddings.</p></li>
</ul>
<p><img alt="The box models of LVGL: The content area is smaller then the bounding box with the padding and border width" src="../_images/boxmodel.png" /></p>
<p>The border is drawn inside the bounding box. Inside the border LVGL keeps &quot;padding size&quot; to place the children.</p>
<p>The outline is drawn outside of the bounding box.</p>
</div>
<div class="section" id="important-notes">
<h3>Important notes<a class="headerlink" href="#important-notes" title="Permalink to this headline">¶</a></h3>
<p>This section describes special cases in which LVGL's behavior might be unexpected.</p>
<div class="section" id="postponed-coordinate-calculation">
<h4>Postponed coordinate calculation<a class="headerlink" href="#postponed-coordinate-calculation" title="Permalink to this headline">¶</a></h4>
<p>LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance.
Instead, the objects are marked as &quot;dirty&quot; and before redrawing the screen LVGL checks if there are any &quot;dirty&quot; objects. If so it refreshes their position, size and layout.</p>
<p>In other words, if you need to get the any coordinate of an object and it the coordinates were just changed LVGL's needs to be forced to recalculate the coordinates.
To do this call <code class="docutils literal notranslate"><span class="pre">lv_obj_update_layout(obj)</span></code>.</p>
<p>The size and position might depend on the parent or layout. Therefore <code class="docutils literal notranslate"><span class="pre">lv_obj_update_layout</span></code> recalculates the coordinates of all objects on the screen of <code class="docutils literal notranslate"><span class="pre">obj</span></code>.</p>
</div>
<div class="section" id="removing-styles">
<h4>Removing styles<a class="headerlink" href="#removing-styles" title="Permalink to this headline">¶</a></h4>
<p>As it's described in the <a class="reference external" href="#using-styles">Using styles</a> section the coordinates can be set via style properties too.
To be more precise under the hood every style coordinate related property is stored as style a property. If you use <code class="docutils literal notranslate"><span class="pre">lv_obj_set_x(obj,</span> <span class="pre">20)</span></code> LVGL saves <code class="docutils literal notranslate"><span class="pre">x=20</span></code> in the local style of the object.</p>
<p>It's an internal mechanism and doesn't matter much as you use LVGL. However, there is one case in which you need to aware of that. If the style(s) of an object are removed by</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_remove_style_all</span><span class="p">(</span><span class="n">obj</span><span class="p">)</span>
</pre></div>
</div>
<p>or</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_remove_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">LV_PART_MAIN</span><span class="p">);</span>
</pre></div>
</div>
<p>the earlier set coordinates will be removed as well.</p>
<p>For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cm">/*The size of obj1 will be set back to the default in the end*/</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">obj1</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>  <span class="cm">/*Now obj1 has 200;100 size*/</span>
<span class="n">lv_obj_remove_style_all</span><span class="p">(</span><span class="n">obj1</span><span class="p">);</span>    <span class="cm">/*It removes the set sizes*/</span>


<span class="cm">/*obj2 will have 200;100 size in the end */</span>
<span class="n">lv_obj_remove_style_all</span><span class="p">(</span><span class="n">obj2</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">obj2</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class="section" id="position">
<h2>Position<a class="headerlink" href="#position" title="Permalink to this headline">¶</a></h2>
<div class="section" id="simple-way">
<h3>Simple way<a class="headerlink" href="#simple-way" title="Permalink to this headline">¶</a></h3>
<p>To simple set the x and y coordinates of an object use</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="n">lv_obj_set_y</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
<span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span> 	<span class="c1">//Or in one function</span>
</pre></div>
</div>
<p>By default the the x and y coordinates are measured from the top left corner of the parent's content area.
For example if the parent has 5 pixels padding on every side, the above code will place <code class="docutils literal notranslate"><span class="pre">obj</span></code> at (15, 25) because the content area starts after the padding.</p>
<p>If percentage values are calculated from the parents content area size.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">10</span><span class="p">));</span> <span class="c1">//x = 10 % of parant content area width</span>
</pre></div>
</div>
</div>
<div class="section" id="align">
<h3>Align<a class="headerlink" href="#align" title="Permalink to this headline">¶</a></h3>
<p>In some cases it's convenient to change the origin of the positioning from the the default top left. If the origin is changed e.g. to bottom-right, the (0,0) position means: align to the bottom-right corner.
To change the origin use:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_align</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">align</span><span class="p">);</span>
</pre></div>
</div>
<p>To change the alignment and set new coordinates:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_align</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">align</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">);</span>
</pre></div>
</div>
<p>The following alignment options can be used:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_TOP_LEFT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_TOP_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_TOP_RIGHT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_BOTTOM_LEFT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_BOTTOM_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_BOTTOM_RIGHT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_LEFT_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_RIGHT_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_CENTER</span></code></p></li>
</ul>
<p>It quite common to align a children to the center of its parent, there fore is a dedicated function for it:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_center</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>

<span class="c1">//Has the same effect</span>
<span class="n">lv_obj_align</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
</pre></div>
</div>
<p>If the parent's size changes the set alignment and position of the children is applied again automatically.</p>
<p>The functions introduced above aligns the object to its parent. However it's also possible to align an object to an arbitrary object.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">obj_to_align</span><span class="p">,</span> <span class="n">reference_obj</span><span class="p">,</span> <span class="n">align</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">);</span>
</pre></div>
</div>
<p>Besides the alignments options above the following can be used to align the object outside of the reference object:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_TOP_LEFT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_TOP_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_TOP_RIGHT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_BOTTOM_LEFT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_BOTTOM_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_BOTTOM_RIGHT</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_LEFT_TOP</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_LEFT_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_LEFT_BOTTOM</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_RIGHT_TOP</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_RIGHT_MID</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_ALIGN_OUT_RIGHT_BOTTOM</span></code></p></li>
</ul>
<p>For example to align a label above a button and center the label horizontally:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">btn</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_TOP_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-10</span><span class="p">);</span>
</pre></div>
</div>
<p>Note that - unlike with <code class="docutils literal notranslate"><span class="pre">lv_obj_align()</span></code> - <code class="docutils literal notranslate"><span class="pre">lv_obj_align_to()</span></code> can not realign the object if its coordinates or the reference object's coordinates changes.</p>
</div>
</div>
<div class="section" id="size">
<h2>Size<a class="headerlink" href="#size" title="Permalink to this headline">¶</a></h2>
<div class="section" id="id1">
<h3>Simple way<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h3>
<p>The width and the height of an object can be set easily as well:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_width</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>
<span class="n">lv_obj_set_height</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span> 	<span class="c1">//Or in one function</span>
</pre></div>
</div>
<p>Percentage values are calculated based on the parent's content area size. For example to set the object's height to the screen height:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_height</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">100</span><span class="p">));</span>
</pre></div>
</div>
<p>Size setting supports a value: <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code>. It means the object's size in the respective direction will be set to the size of its children.
Note that only children on the right and bottom will be considered and children on the top and left remain cropped. This limitation makes the behavior more predictable.</p>
<p>Objects with <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_HIDDEN</span></code> or <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_FLOATING</span></code> will be ignored by the <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code> calculation.</p>
<p>The above functions set the size of the bounding box of the object but the size of the content area can be set as well. It means the object's bounding box will be larger with the paddings than the set size.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_content_width</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span> <span class="c1">//The actual width: padding left + 50 + padding right</span>
<span class="n">lv_obj_set_content_height</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span> <span class="c1">//The actual width: padding top + 30 + padding bottom</span>
</pre></div>
</div>
<p>The size of the bounding box and the content area can be get with the following functions:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_coord_t</span> <span class="n">w</span> <span class="o">=</span> <span class="n">lv_obj_get_width</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
<span class="n">lv_coord_t</span> <span class="n">h</span> <span class="o">=</span> <span class="n">lv_obj_get_height</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
<span class="n">lv_coord_t</span> <span class="n">content_w</span> <span class="o">=</span> <span class="n">lv_obj_get_content_width</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
<span class="n">lv_coord_t</span> <span class="n">content_h</span> <span class="o">=</span> <span class="n">lv_obj_get_content_height</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="using-styles">
<h2>Using styles<a class="headerlink" href="#using-styles" title="Permalink to this headline">¶</a></h2>
<p>Under the hood the position, size and alignment properties are style properties.
The above described &quot;simple functions&quot; hide the style related code for the sake of simplicity and set the position, size, and alignment properties in the local styles of the obejct.</p>
<p>However, using styles as to set the coordinates has some great advantages:</p>
<ul class="simple">
<li><p>It makes it easy to set the width/height/etc for several objects together. E.g. make all the sliders 100x10 pixels sized.</p></li>
<li><p>It also makes possible to modify the values in one place.</p></li>
<li><p>The values can be overwritten by other styles. For example <code class="docutils literal notranslate"><span class="pre">style_btn</span></code> makes the object <code class="docutils literal notranslate"><span class="pre">100x50</span></code> by default but adding <code class="docutils literal notranslate"><span class="pre">style_full_width</span></code> overwrites only the width of the object.</p></li>
<li><p>The object can have different position or size in different state. E.g. 100 px wide in <code class="docutils literal notranslate"><span class="pre">LV_STATE_DEFAULT</span></code> but 120 px in <code class="docutils literal notranslate"><span class="pre">LV_STATE_PRESSED</span></code>.</p></li>
<li><p>Style transitions can be used to make the coordinate changes smooth.</p></li>
</ul>
<p>Here are some examples to set an object's size using a style:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">);</span>
<span class="n">lv_style_set_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>

<span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">LV_PART_MAIN</span><span class="p">);</span>
</pre></div>
</div>
<p>As you will see below there are some other great features of size and position setting.
However, to keep the LVGL's API lean only the most common coordinate setting features have a &quot;simple&quot; version and the more complex features can be used via styles.</p>
</div>
<div class="section" id="translation">
<h2>Translation<a class="headerlink" href="#translation" title="Permalink to this headline">¶</a></h2>
<p>Let's say the there are 3 buttons next to each other. Their position is set as described above.
Now you want to move a buttons up a little when it's pressed.</p>
<p>One way to achieve this is setting a new Y coordinate for pressed state:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_normal</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_normal</span><span class="p">);</span>
<span class="n">lv_style_set_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>

<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_pressed</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">);</span>
<span class="n">lv_style_set_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="mi">80</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn3</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn3</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
</pre></div>
</div>
<p>It works but it's not really flexible because the pressed coordinate is hard-coded. If the buttons are not at y=100 <code class="docutils literal notranslate"><span class="pre">style_pressed</span></code> won't work as expected. To solve this translations can be used:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_normal</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_normal</span><span class="p">);</span>
<span class="n">lv_style_set_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>

<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_pressed</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">);</span>
<span class="n">lv_style_set_translate_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="mi">-20</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn3</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_normal</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn3</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
</pre></div>
</div>
<p>Translation is applied from the current position of the object.</p>
<p>Percentage values can be used in translations as well. The percentage is relative to the size of the object (and not to the size of the parent). For example <code class="docutils literal notranslate"><span class="pre">lv_pct(50)</span></code> will move the object with half of its width/height.</p>
<p>The translation is applied after the layouts are calculated. Therefore, even the layouted objects' position can be translated.</p>
<p>The translation actually moves the object. It means it makes the scrollbars and <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code> sized objects react to the position change.</p>
</div>
<div class="section" id="transformation">
<h2>Transformation<a class="headerlink" href="#transformation" title="Permalink to this headline">¶</a></h2>
<p>Similarly to the position the size can be changed relative to the current size as well.
The transformed width and height are added on both sides of the object. This means 10 px transformed width makes the object 2x10 pixel wider.</p>
<p>Unlike position translation, the size transformation doesn't make the object &quot;really&quot; larger. In other words scrollbars, layouts, <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code> will not consider the transformed size.
Hence size transformation if &quot;only&quot; a visual effect.</p>
<p>This code makes the a button larger when it's pressed:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_pressed</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">);</span>
<span class="n">lv_style_set_transform_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="n">lv_style_set_transform_height</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
</pre></div>
</div>
<div class="section" id="min-and-max-size">
<h3>Min and Max size<a class="headerlink" href="#min-and-max-size" title="Permalink to this headline">¶</a></h3>
<p>Similarly to CSS, LVGL also support <code class="docutils literal notranslate"><span class="pre">min-width</span></code>, <code class="docutils literal notranslate"><span class="pre">max-width</span></code>, <code class="docutils literal notranslate"><span class="pre">min-height</span></code> and <code class="docutils literal notranslate"><span class="pre">max-height</span></code>. These are limits preventing an object's size to be smaller/larger then these values.
They are especially useful if the size is set by percentage or <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code>.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_max_height</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">);</span>
<span class="n">lv_style_set_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>

<span class="n">lv_obj_set_height</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">100</span><span class="p">));</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span> <span class="c1">//Limit the  height to 200 px</span>
</pre></div>
</div>
<p>Percentage values can be used as well which are relative to the size of the parent's content area size.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_max_height</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">);</span>
<span class="n">lv_style_set_y</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">50</span><span class="p">));</span>

<span class="n">lv_obj_set_height</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">100</span><span class="p">));</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_max_height</span><span class="p">,</span> <span class="n">LV_STATE_DEFAULT</span><span class="p">);</span> <span class="c1">//Limit the height to half parent height</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="layout">
<h2>Layout<a class="headerlink" href="#layout" title="Permalink to this headline">¶</a></h2>
<div class="section" id="id2">
<h3>Overview<a class="headerlink" href="#id2" title="Permalink to this headline">¶</a></h3>
<p>Layouts can update the position and size of an object's children. They can be used to automatically arrange the children into a line or column, or in much more complicated forms.</p>
<p>The position and size set by the layout overwrites the &quot;normal&quot; x, y, width, and height settings.</p>
<p>There is only one function that is the same for every layout: <code class="docutils literal notranslate"><span class="pre">lv_obj_set_layout(obj,</span> <span class="pre">&lt;LAYOUT_NAME&gt;)</span></code> sets the layout on an object.<br />For the further settings of the parent and children see the documentations of the given layout.</p>
</div>
<div class="section" id="built-in-layout">
<h3>Built-in layout<a class="headerlink" href="#built-in-layout" title="Permalink to this headline">¶</a></h3>
<p>LVGL comes with two very powerful layouts:</p>
<ul class="simple">
<li><p>Flexbox</p></li>
<li><p>Grid</p></li>
</ul>
<p>Both are heavily inspired by the CSS layouts with the same name.</p>
</div>
<div class="section" id="flags">
<h3>Flags<a class="headerlink" href="#flags" title="Permalink to this headline">¶</a></h3>
<p>There are some flags that can be used on object to affect how they behave with layouts:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_HIDDEN</span></code> Hidden object are ignored from layout calculations.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_IGNORE_LAYOUT</span></code> The object is simply ignored by the layouts. Its coordinates can be set as usual.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_FLOATING</span></code> Same as <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_IGNORE_LAYOUT</span></code> but the object with <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_FLOATING</span></code> will be ignored from <code class="docutils literal notranslate"><span class="pre">LV_SIZE_CONTENT</span></code> calculations.</p></li>
</ul>
<p>These flags can be added/removed with <code class="docutils literal notranslate"><span class="pre">lv_obj_add/clear_flag(obj,</span> <span class="pre">FLAG);</span></code></p>
</div>
<div class="section" id="adding-new-layouts">
<h3>Adding new layouts<a class="headerlink" href="#adding-new-layouts" title="Permalink to this headline">¶</a></h3>
<p>LVGL can be freely extended by a custom layouts like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="kt">uint32_t</span> <span class="n">MY_LAYOUT</span><span class="p">;</span>

<span class="p">...</span>

<span class="n">MY_LAYOUT</span> <span class="o">=</span> <span class="n">lv_layout_register</span><span class="p">(</span><span class="n">my_layout_update</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">user_data</span><span class="p">);</span>

<span class="p">...</span>

<span class="kt">void</span> <span class="n">my_layout_update</span><span class="p">(</span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span><span class="p">,</span> <span class="kt">void</span> <span class="o">*</span> <span class="n">user_data</span><span class="p">)</span>
<span class="p">{</span>
	<span class="cm">/*Will be called automatically if required to reposition/resize the children of &quot;obj&quot; */</span>	
<span class="p">}</span>
</pre></div>
</div>
<p>Custom style properties can be added too that can be get and used in the update callback. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="kt">uint32_t</span> <span class="n">MY_PROP</span><span class="p">;</span>
<span class="p">...</span>

<span class="n">LV_STYLE_MY_PROP</span> <span class="o">=</span> <span class="n">lv_style_register_prop</span><span class="p">();</span>

<span class="p">...</span>
<span class="k">static</span> <span class="kr">inline</span> <span class="kt">void</span> <span class="n">lv_style_set_my_prop</span><span class="p">(</span><span class="n">lv_style_t</span> <span class="o">*</span> <span class="n">style</span><span class="p">,</span> <span class="kt">uint32_t</span> <span class="n">value</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_style_value_t</span> <span class="n">v</span> <span class="o">=</span> <span class="p">{</span>
        <span class="p">.</span><span class="n">num</span> <span class="o">=</span> <span class="p">(</span><span class="kt">int32_t</span><span class="p">)</span><span class="n">value</span>
    <span class="p">};</span>
    <span class="n">lv_style_set_prop</span><span class="p">(</span><span class="n">style</span><span class="p">,</span> <span class="n">LV_STYLE_MY_PROP</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="style.html" class="btn btn-neutral float-right" title="Styles" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="object.html" class="btn btn-neutral float-left" title="Objects" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2020, LVGL LLC.
      <span class="lastupdated">
        Last updated on Jan 10, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
</script>


</body>
</html>